<template>
  <div class="index-container-ty index-page">
    <a-spin :spinning="loading">
      <IndexHeader title="电能耗分析"></IndexHeader>
      <a-row :gutter="24" class="current-date">
        <a-col :sm="24" :md="12" :xl="12">
          <span class="current-date-span">时间范围</span>
          <a-range-picker v-model="times" format="YYYY-MM-DD" @change="mock" />
        </a-col>
        <a-col :sm="24" :md="12" :xl="12" style="text-align: right">
          <span class="current-date-content">{{ currentDate }}</span>
        </a-col>
      </a-row>
      <a-row :gutter="15" class="huizong">
        <a-col :sm="24" :md="6" :xl="6">
          <div class="huizong-left">
            <div class="left-title">
              <div class="left-title-icon"></div>
              用电均只消耗
            </div>
            <div>
              <p class="left-conetnt-text1">{{ dNum }}</p>
              <p class="left-conetnt-text2">电产出（元/只）</p>
            </div>
          </div>
        </a-col>
        <a-col :sm="24" :md="18" :xl="18">
          <div class="huizong-right">
            <a-row :gutter="12">
              <a-col :sm="12" :mc="8" :xl="8">
                <p class="right-text1 orange">用量</p>
                <p class="right-text1 orange">{{ tzcNum }}</p>
                <p class="right-text2">屠宰厂</p>
              </a-col>
              <a-col :sm="12" :mc="8" :xl="8">
                <p class="right-text1 yellow">用量</p>
                <p class="right-text1 yellow">{{ tlcNum }}</p>
                <p class="right-text2">调理厂</p>
              </a-col>
              <a-col :sm="12" :mc="8" :xl="8">
                <p class="right-text1 green">用量</p>
                <p class="right-text1 green">{{ sscNum }}</p>
                <p class="right-text2">熟食厂</p>
              </a-col>
            </a-row>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex" justify="start" :gutter="20" class="content">
        <a-col :sm="24" :lg="12">
          <div class="content-item">
            <div class="item-title">
              <div class="item-title-icon"></div>
              预警信息
            </div>
            <a-table
              :class="'my-index-table tytable1'"
              ref="table1"
              size="small"
              rowKey="id"
              :columns="columnsPolice"
              :dataSource="yjList"
              :pagination="false"
              :scroll="{ y: 230 }"
            >
              <template slot="ellipsisText" slot-scope="text">
                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
              </template>

              <template slot="ewName" slot-scope="text">
                <span class="red">{{ text }}</span>
              </template>
            </a-table>
          </div>
        </a-col>

        <a-col :sm="24" :lg="12">
          <div class="content-item">
            <div class="item-title">
              <div class="item-title-icon"></div>
              熟食厂分析
            </div>
            <a-table
              :class="'my-index-table tytable2'"
              ref="table2"
              size="small"
              rowKey="id"
              :columns="columns"
              :dataSource="sscList"
              :pagination="false"
              :scroll="{ y: 230 }"
            >
              <template slot="ellipsisText" slot-scope="text">
                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
              </template>
              <template slot="Nyjhz" slot-scope="text">
                <span class="green">{{ text }}</span>
              </template>
              <template slot="Tb" slot-scope="text, record">
                <span :class="{ green: record.state == '1', red: record.state == '2' }"
                  >{{ text }} {{ record.state == '1' ? '↑' : record.state == '2' ? '↓' : '' }}</span
                >
              </template>
            </a-table>
          </div>
        </a-col>
        <a-col :sm="24" :lg="12">
          <div class="content-item">
            <div class="item-title">
              <div class="item-title-icon"></div>
              调理厂分析
            </div>
            <a-table
              :class="'my-index-table tytable4'"
              ref="table4"
              size="small"
              rowKey="id"
              :columns="columns"
              :dataSource="tlcList"
              :pagination="false"
              :scroll="{ y: 230 }"
            >
              <template slot="ellipsisText" slot-scope="text">
                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
              </template>

              <template slot="Nyjhz" slot-scope="text">
                <span class="green">{{ text }}</span>
              </template>
              <template slot="Tb" slot-scope="text, record">
                <span :class="{ green: record.state == '1', red: record.state == '2' }"
                  >{{ text }} {{ record.state == '1' ? '↑' : record.state == '2' ? '↓' : '' }}</span
                >
              </template>
            </a-table>
          </div>
        </a-col>
        <a-col :sm="24" :lg="12">
          <div class="content-item">
            <div class="item-title">
              <div class="item-title-icon"></div>
              屠宰厂分析
            </div>
            <a-table
              :class="'my-index-table tytable3'"
              ref="table3"
              size="small"
              rowKey="id"
              :columns="columns"
              :dataSource="tzcList"
              :pagination="false"
              :scroll="{ y: 230 }"
            >
              <template slot="ellipsisText" slot-scope="text">
                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
              </template>

              <template slot="Nyjhz" slot-scope="text">
                <span class="green">{{ text }}</span>
              </template>
              <template slot="Tb" slot-scope="text, record">
                <span :class="{ green: record.state == '1', red: record.state == '2' }"
                  >{{ text }} {{ record.state == '1' ? '↑' : record.state == '2' ? '↓' : '' }}</span
                >
              </template>
            </a-table>
          </div>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>

<script>
import noDataPng from '@/assets/nodata.png'
import IndexHeader from './IndexHeader'
import { httpAction, getAction } from '@/api/manage'
import { formatDateTime, formatDate } from './format'

export default {
  name: 'dian',
  components: { IndexHeader },
  data() {
    return {
      loading: false,
      times: [], //时间范围选择
      textMaxLength: 8, //列表内容需要展示。。。时，显示的最多字数
      yjList: [], //预警列表
      sscList: [], //熟食厂列表
      tlcList: [], //调理厂列表
      tzcList: [], //屠宰场列表
      currentDate: '', //头部时间
      intelvalObj: null, //头部时间定时器
      // 预警列表列对象
      columnsPolice: [
        {
          title: '预警日期',
          align: 'center',
          dataIndex: 'warningTime',
          width: 80,
        },
        {
          title: '所属能源',
          align: 'center',
          dataIndex: 'energyTypesId_dictText',
          scopedSlots: { customRender: 'ellipsisText' },
          width: 80,
        },
        {
          title: '预警设备',
          align: 'center',
          dataIndex: 'equipmentCode',
          width: 80,
        },
        {
          title: '预警类型',
          align: 'center',
          dataIndex: 'warningType_dictText',
          width: 80,
        },
        {
          title: '预警内容',
          align: 'center',
          dataIndex: 'ewName',
          scopedSlots: { customRender: 'ewName' },
          width: 80,
        },
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align: 'center',
        //   scopedSlots: { customRender: 'action' },
        // },
      ],
      // 其他列表列对象
      columns: [
        {
          title: '日期',
          align: 'center',
          dataIndex: 'Time',
          width: 80,
        },
        {
          title: '总计费用',
          align: 'center',
          dataIndex: 'cost',
          scopedSlots: { customRender: 'ellipsisText' },
          width: 80,
        },
        {
          title: '电（kw）',
          align: 'center',
          dataIndex: 'Elecrric',
          width: 80,
        },
        {
          title: '产量',
          align: 'center',
          dataIndex: 'yield',
          width: 80,
        },
        {
          title: '费用均耗/只',
          align: 'center',
          dataIndex: 'Fyjhz',
          width: 80,
        },
        {
          title: '能源均耗/只',
          align: 'center',
          dataIndex: 'Nyjhz',
          scopedSlots: { customRender: 'Nyjhz' },
          width: 80,
        },
        {
          title: '同比',
          align: 'center',
          dataIndex: 'Tb',
          scopedSlots: { customRender: 'Tb' },
          width: 80,
        },
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align: 'center',
        //   scopedSlots: { customRender: 'action' },
        // },
      ],
      // 用电均只消耗
      dNum: '',
      // 屠宰场用量
      tzcNum: '',
      // 调理厂用量
      tlcNum: '',
      // 熟食厂用量
      sscNum: '',
    }
  },
  created() {
    this.mock()
  },
  mounted() {
    this.currentDate = formatDateTime(new Date())
    this.intelvalObj = setInterval(() => {
      this.currentDate = formatDateTime(new Date())
    }, 1000)
  },
  methods: {
    // 加载整个页面数据
    mock() {
      getAction('/electricanalysis/queryeInformationEle', {
        warningTime_begin: this.times && this.times.length > 0 ? formatDate(new Date(this.times[0])) : '',
        warningTime_end: this.times && this.times.length > 1 ? formatDate(new Date(this.times[1])) : '',
      }).then((res) => {
        if (res.success) {
          this.dNum = res.result.dNum
          this.tzcNum = res.result.tzcNum
          this.tlcNum = res.result.tlcNum
          this.sscNum = res.result.sscNum
          // this.yjList = res.result.yjList
          this.sscList = res.result.sscList
          this.tlcList = res.result.tlcList
          this.tzcList = res.result.tzcList
        } else {
          this.$message.warning(res.message)
        }
      })
      this.getYJList()
    },
    // 获取预警信息列表
    getYJList() {
      getAction('/information/ewInformation/list', {
        energyTypesId: '1463328909996969985',
        warningTime_begin: this.times && this.times.length > 0 ? formatDate(new Date(this.times[0])) : '',
        warningTime_end: this.times && this.times.length > 1 ? formatDate(new Date(this.times[1])) : '',
      }).then((res) => {
        if (res.success) {
          this.yjList = res.result.records
        } else {
          this.$message.warning(res.message)
        }
      })
    },
  },
  beforeDestroy() {
    clearInterval(this.intelvalObj)
    this.intelvalObj = null
  },
}
</script>

<style lang="less" scoped>
.index-page {
  padding: 12px 12px 0;
  height: 1016px;
  background-color: rgba(0, 0, 59, 1);
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  p {
    margin: 0;
    padding: 0;
  }
  .current-date {
    width: 100%;
    position: absolute;
    top: 70px;
    .current-date-span {
      font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: #6e98fc;
      line-height: 22px;
      margin-right: 10px;
    }
    /deep/.ant-input {
      background-color: rgba(0, 102, 153, 0.498039215686275);
      box-sizing: border-box;
      border: 1px solid rgba(0, 102, 153, 1);
      border-radius: 4px;
      font-size: 12px;
      color: #6e98fc;
      text-align: left;
      line-height: 22px;
    }
    /deep/.ant-calendar-range-picker-separator {
      color: #6e98fc;
    }
    /deep/.ant-calendar-picker-clear {
      background: transparent;
      color: #fff;
    }
    .current-date-content {
      font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 20px;
      color: #6e98fc;
      line-height: 22px;
    }
  }
  .huizong {
    position: relative;
    top: -15px;
    .huizong-left {
      height: 121px;
      background-color: rgba(15, 30, 75, 0.749019607843137);
      box-sizing: border-box;
      border: 1px solid rgba(0, 102, 153, 1);
      border-radius: 4px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      padding: 10px;
      .left-title {
        font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 18px;
        color: #b6d7ff;
        line-height: 28px;
        display: flex;
        align-items: center;
        .left-title-icon {
          width: 12px;
          height: 14px;
          background: url('../../assets/images/index/u12.png') no-repeat;
          background-size: 100% 100%;
          margin-right: 8px;
        }
      }
      .left-conetnt-text1 {
        color: #f0484d;
        font-size: 16px;
        font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
        font-weight: 400;
        font-style: normal;
        text-align: center;
        line-height: 28px;
      }
      .left-conetnt-text2 {
        color: #b6d7ff;
        font-size: 14px;
        font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
        font-weight: 400;
        font-style: normal;
        text-align: center;
        line-height: 28px;
      }
    }
    .huizong-right {
      height: 121px;
      background-color: rgba(15, 30, 75, 0.749019607843137);
      box-sizing: border-box;
      border: 1px solid rgba(0, 102, 153, 1);
      border-radius: 4px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      padding: 18px;
      font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
      font-weight: 400;
      font-style: normal;
      text-align: center;
      line-height: 28px;
      .right-text1 {
        font-size: 16px;
      }
      .right-text1.red {
        color: #f0484d;
      }
      .right-text1.orange {
        color: #ff884e;
      }
      .right-text1.yellow {
        color: #d4bb0c;
      }
      .right-text1.green {
        color: #03d58b;
      }
      .right-text2 {
        font-size: 14px;
        color: #b6d7ff;
      }
    }
  }
  .content {
    position: relative;
    top: -10px;
    .content-item {
      height: 331px;
      background: url('../../assets/images/index/u23.png') no-repeat;
      background-size: 100% 100%;
      padding: 20px 13px;
      box-sizing: border-box;
      margin-bottom: 15px;
      .item-title {
        display: flex;
        align-items: center;
        font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 18px;
        color: #b6d7ff;
        line-height: 28px;
        margin-bottom: 10px;
        .item-title-icon {
          width: 12px;
          height: 14px;
          background: url('../../assets/images/index/u12.png') no-repeat;
          background-size: 100% 100%;
          margin-right: 10px;
        }
      }
      .my-index-table {
        /deep/.ant-table-small,
        /deep/.ant-table-tbody > tr > td,
        /deep/.ant-table-thead > tr > th {
          border: none;
        }
        /deep/.ant-table-thead > tr > th {
          font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 14px;
          color: #6e98fc;
          line-height: 22px;
        }
        /deep/.ant-table-tbody > tr > td {
          font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 14px;
          color: #b6d7ff;
          line-height: 28px;
        }
        /deep/.ant-table-scroll {
          overflow: hidden;
        }
        /deep/.ant-table-placeholder {
          background: transparent;
          border: none;
          .ant-empty-description {
            color: #b6d7ff;
          }
          .ant-empty-image {
            display: none;
          }
        }
        /deep/.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
          background: transparent;
        }
        /deep/.ant-table-header {
          overflow: hidden !important;
        }
        /deep/.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
          background: transparent;
        }
        /deep/.ant-table-fixed-header .ant-table-scroll .ant-table-header::-webkit-scrollbar {
          border: none;
        }
        /deep/.ant-table-fixed-header .ant-table-scroll .ant-table-header::-webkit-scrollbar-track {
          background: transparent;
        }
        /deep/.ant-table-body::-webkit-scrollbar-track {
          background: rgba(0, 0, 0, 0.3);
          border-radius: 5px;
        }
        /deep/.ant-table-body::-webkit-scrollbar-thumb {
          background: rgba(0, 0, 0, 0.6);
          border-radius: 5px;
        }
        .green {
          color: #03d58b;
        }
        .red {
          color: #f0484d;
        }
      }
    }
  }
}
</style>